<template>
  <div class="fu">
    <div class="left">
      <i class="el-icon-date"></i>
      <span>教师课表</span>
    </div>
    <div style="clear: left"></div>
    <div class="wai-bord">
      <table width="100%">
        <thead class="table-head">
        <tr>
          <th>时间</th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
          <th>周六</th>
          <th>周日</th>
        </tr>
        </thead>
        <tbody>
        <tr class="t-body" v-for="(r,i) in courseTime">
          <td>{{classTime(i)}}</td>
          <td v-for="(c,j) in r">
            <div class="class-name">{{c.courseName}}</div>
            <div class="n-font">
              {{c.teacherName}}<br>
              {{c.courseLocation}}
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import {deletefn, get, post, update} from "../../common/request";

  export default {
    name: "TeacherCourseSelect",
    data() {
      return {
        courseTime: []
      }
    },
    mounted() {
      this.getTable();
    },
    methods: {
      classTime(index) {
        switch (index) {
          case 0:
            return "第一节";
            break;
          case 1:
            return "第二节";
            break;
          case 2:
            return "第三节";
            break;
          case 3:
            return "第四节";
            break;
          case 4:
            return "第五节";
            break;
          case 5:
            return "第六节";
            break;
          case 6:
            return "第七节";
            break;
          case 7:
            return "第八节";
            break;
          case 8:
            return "第九节";
            break;
          case 9:
            return "第十节";
            break;
        }
      },
      createTimeTable() {
        for (let i = 0; i < 10; i++) {
          let row = [];
          for (let j = 0; j < 7; j++) {
            row[j] = {
              courseName: "",
              teacherName: "",
              courseLocation: ""
            }
          }
          this.courseTime[i] = row;
        }

      },
      getTable() {
        this.createTimeTable();
        this.getCourseTable();
        console.log(this.courseTime);
      },
      getCourseTable(){

        get("/course/getCourseTeacherTable").then(res=>{

          for (let i = 0;i < res.data.length; i++){
            let time = res.data[i].courseTime.split("-");
            for (let j = 0;j < time[2]; j++){
              this.courseTime[time[1]-1+j][time[0]-1] = {
                courseName: res.data[i].courseName,
                teacherName: res.data[i].teacherName,
                courseLocation: res.data[i].courseLocation
              }
            }
          }
          this.$forceUpdate();
        })


      }

    }

  }
</script>

<style scoped>

  .left {
    float: left;
    font-size: 14px;
    color: #606266;
    margin-bottom: 5px;
  }

  .wai-bord {
    background-color: white;
    border: #dcdfe6 solid 1px;
    border-radius: 3px;
    padding: 5px 15px;
  }

  .table-head {
    background-color: rgb(103, 161, 255);
    color: white;
  }

  .table-head > tr > th{
    width: 10%;
  }

  .t-body {
    background-color: rgb(234, 242, 255);
    height: 50px;
  }

  .n-font {
    font-size: 10px;
    color: #72767b;
  }

  .class-name{
    font-size: 12px;
  }
</style>
